<template>
    <div class="shop-column" @scroll="handleScrollColumn">
        <div class="rounded-container" v-for="(shop, index) in dataList" :key="index" @click="merchand(shop)">
            <img :src="shop.src" class="rounded-image"/>
            <div class="rounded-content">
                <div class="title-content">
                    <strong>{{ shop.brandName }}/{{ shop.subBrandName }} </strong> {{ truncateText(shop.title, 12) }}
                </div>
                <div class="tag">
                    <label v-for="(tag, index) in shop.tags" :key="index">{{ tag }}</label>
                </div>
                <div>
                    <strong class="money">
                        <PriceDisplay :price="shop.price" :activePrice="shop.activePrice" />
                    </strong>
                </div>
                <div class="haopin">
                    <label>{{ shop.evalCount }}条评价</label>
                    <label>{{ shop.evalRate }}%好评</label>
                </div>
            </div>
        </div>
    </div>
</template>
<script  setup>
import { truncateText } from '../util/tools.js';
import { defineProps, watch } from 'vue';
import PriceDisplay from './PriceDisplay.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
    dataList: Object
});

watch(() => props.dataList, (newDataList) => {
      // 当 dataList 发生变化时，这里的代码会执行
    console.log('新dataList changed:', newDataList);
});

const merchand = (shop) => {
    console.log("选择了", shop);
    const shopId = shop.id;
    router.push({ name:  'productDetail', query: {id: shopId} });
}

</script>

<style scoped>
/* 商品列表 */
.shop-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    height: auto;
    width: 100%;
    margin-bottom: 10%;
}
.rounded-container {
    border: 1px solid #ccc; /* 可选，为容器添加边框 */
    border-radius: 12px; /* 设置圆角大小 */
    width: 100%; /* 容器宽度，可以根据需要调整 */
    margin: auto; /* 水平居中 */
    overflow: auto; /* 防止内容溢出 */
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0px;
}
.rounded-container .title-content {
    font-size: 14px;
}
.rounded-image {
    width: 100%; /* 图片宽度，根据需要调整 */
    height: 150px;
    display: block; /* 移除图片下方的默认间隙 */
    margin: 0 0; /* 让图片在容器内居中 */
    cursor: pointer;
}
.rounded-content {
    text-align: left; /* 让文本和图片居中显示 */
    width: 100%; /* 容器宽度，可以根据需要调整 */
    margin: 2px; /* 水平居中 */
    padding: 0px 2px;
    overflow: auto; /* 防止内容溢出 */
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    float: left;
}
.rounded-container .money {
    width: 100%;
    color: red;
    font-size: 18px;
    cursor: pointer;
}
.rounded-container .tag label {
    position: relative;
    border-radius: 16px;
    font-size: 12px;
    background-color: rgb(197, 194, 194);
    width: 100%;
    height: 100%;
    margin-right: 2px;
    cursor: pointer;
}
.rounded-container .haopin label {
    font-size: 12px;
    width: 100%;
    margin: 0px 10px 0px 0px;
    color: dimgrey;
    cursor: pointer;
}
</style>
